<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->

    <!-- 个人信息 -->
    <van-cell
      class="avatar-cell"
      title="头像"
      is-link
      center
      @click="$refs.file.click()"
    >
      <input type="file" hidden ref="file" @change="fileChange" />
      <van-image class="avatar" round fit="cover" :src="userinfo.photo" />
    </van-cell>
    <van-cell
      title="昵称"
      @click="editNameShow = true"
      :value="userinfo.name"
      is-link
    />
    <van-cell
      title="性别"
      @click="editGenderShow = true"
      :value="userinfo.gender ? '女' : '男'"
      is-link
    />
    <van-cell
      title="生日"
      @click="editBirthdayShow = true"
      :value="userinfo.birthday"
      is-link
    />
    <!-- /个人信息 -->
    <!-- 修改照片弹框 -->
    <van-popup
      v-model="editPhotoShow"
      :style="{ height: '100%', backgroundColor: '#000' }"
      position="bottom"
    >
      <edit-photo v-if="editPhotoShow" :imgUrl="imgFile" @close="editPhoto" />
    </van-popup>
    <!-- /修改照片弹框 -->

    <!-- 修改昵称弹框 -->
    <van-popup v-model="editNameShow" style="height:100%" position="bottom">
      <edit-name
        v-if="editNameShow"
        :name="userinfo.name"
        class="edit-name"
        @close="updateName"
      />
    </van-popup>
    <!-- /修改昵称弹框 -->

    <!-- 修改性别弹框 -->
    <van-popup v-model="editGenderShow" position="bottom">
      <edit-gender
        v-if="editGenderShow"
        @close="editGender"
        :gender="userinfo.gender"
      />
    </van-popup>
    <!-- /修改性别弹框 -->

    <!-- 修改生日弹框 -->
    <van-popup v-model="editBirthdayShow" style="height:100%" position="bottom">
      <edit-birthday v-if="editBirthdayShow" />
    </van-popup>
    <!-- /修改生日弹框 -->
  </div>
</template>

<script>
import { getUserProfile } from "@/api/user";
import EditName from "./components/edit-name.vue";
import EditGender from "./components/edit-gender.vue";
import EditBirthday from "./components/edit-birthday.vue";
import EditPhoto from "./components/edit-photo.vue";
export default {
  name: "UserProfile",
  components: { EditName, EditGender, EditBirthday, EditPhoto },
  props: {},
  data() {
    return {
      userinfo: {},
      editNameShow: false,
      editGenderShow: false,
      editBirthdayShow: false,
      editPhotoShow: false,
      imgFile: null
    };
  },
  computed: {},
  watch: {},
  created() {
    this.loadUserProfile();
  },
  mounted() {},
  methods: {
    async loadUserProfile() {
      try {
        let { data: res } = await getUserProfile();
        console.log(res);
        this.userinfo = res.data;
      } catch (error) {
        this.$toast.fail("获取用户资料失败");
      }
    },
    updateName(val) {
      val && (this.userinfo.name = val);
      this.editNameShow = false;
    },
    editGender(val) {
      val !== undefined && (this.userinfo.gender = val);
      this.editGenderShow = false;
    },
    // 文件变化处理事件
    fileChange() {
      if (this.$refs.file.files.length) {
        this.editPhotoShow = true;
        this.imgFile = URL.createObjectURL(this.$refs.file.files[0]);
      }
    },
    editPhoto(val) {
      val && (this.userinfo.photo = val);
      this.editPhotoShow = false;
    }
  }
};
</script>

<style scoped lang="less">
.user-profile {
  .avatar-cell {
    .van-cell__value {
      display: flex;
      flex-direction: row-reverse;
    }
    .avatar {
      width: 60px;
      height: 60px;
    }
  }
}
</style>
